<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Pricing</title>
	<link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
	<link rel="shortcut icon" href="${request.contextPath} /static/img/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="${request.contextPath}/static/css/reset.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/ins/common.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/pricing-order.css">
    <#include "../../component/facebookPixel.ftl">
</head>
<body>
<#include "../../header_new1.ftl">
<main>
	<section>
		<div class="container">
			<h1>Confirm Order and Pay</h1>
			<h2>Please make the payment, after that you can enjoy all the features and benefits.</h2>
			<div class="order-info">
				<div class="info-item">
					<div class="title">
						<div class="left">Plan Type</div>
						<div class="right">
							<a href="/pricing">Select Other Version</a>
						</div>
					</div>
					<div class="item-wrap">
						<ul class="wrap-tabs">
							<li class="tab-item is-active">
								<div class="title">
									<div class="title_inner">${curName}</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="info-item">
					<div class="title">
						<div class="left">Unit</div>
					</div>
					<div class="item-wrap">
						<ul class="wrap-tabs" id="unitList">
							<#if curProduct == 5>
								<#list reportProduct as product>
									<li class="tab-item<#if product_index == 0> is-active</#if>">
										<div class="title">
											<div class="title_inner">${product.name}</div>
											<#if product_index != 0>
												<div class="label">${product.discount * 100}% OFF</div>
											</#if>
										</div>
										<#if product_index != 0>
											<div class="sub-title">Only US$${product.price * (1 - product.discount)/ product.number}/report, saved $${product.price * product.discount}</div>
										<#else>
											<div class="sub-title">$${product.price / product.number}/report</div>
										</#if>

									</li>
								</#list>
							<#else>
								<li class="tab-item is-active">
									<div class="title">
										<div class="title_inner">12 Months</div>
										<div class="label">${versionProduct.yearDiscount * 100}% OFF</div>
									</div>
									<div class="sub-title">Only US$${versionProduct.yearPrice / 12}/month, saved ${versionProduct.price * 12 -  versionProduct.yearPrice } in total</div>
								</li>
								<li class="tab-item">
									<div class="title">
										<div class="title_inner">6 Months</div>
										<div class="label">${versionProduct.halfYearDiscount * 100}% OFF</div>
									</div>
									<div class="sub-title">Only US$${versionProduct.halfYearPrice / 6}/month, saved ${ versionProduct.price * 6 - versionProduct.halfYearPrice} in total</div>
								</li>
								<li class="tab-item">
									<div class="title">
										<div class="title_inner">1 Month</div>
									</div>
									<div class="sub-title">US$${versionProduct.price}/month</div>
								</li>
							</#if>
						</ul>
					</div>
				</div>
				<div class="info-item">
					<div class="title">
						<div class="left">Payment Method</div>
					</div>
					<div class="item-wrap">
						<ul class="wrap-tabs pay-tabs">
							<li class="tab-item is-active" style="padding: 16px 0">
								<img src="/static/img/PayPal.png" srcset="/static/img/PayPal@2x.png 2x"  alt="paypal">
							</li>
							<li class="tab-item">
								<img src="/static/img/wechat-pay.png" class="wechat-img" srcset="/static/img/wechat-pay@2x.png 2x, /static/img/wechat-pay@3x.png 3x"  alt="wechatpay">
								WeChat Pay
							</li>
						</ul>
					</div>
				</div>
				<div class="info-item">
					<div class="title">
						<div class="left">Order Details</div>
					</div>
					<div class="item-wrap detail-wrap">
						<div class="top">
							<div class="detail-item">
								<div class="label">Product Type</div>
								<div class="info">${curName}</div>
							</div>
							<div class="detail-item">
								<div class="label">Unit</div>
								<#if curProduct == 5>
									<div class="info" id="unitDetail">${reportProduct[0].name}</div>
								<#else>
									<div class="info" id="unitDetail">12 Months</div>
								</#if>
							</div>
							<div class="detail-item">
								<div class="label">Pament Method</div>
								<div class="info" id="payDetail">PayPal</div>
							</div>
							<#if curProduct != 5>
								<div class="detail-item">
									<div class="label">Valid Until</div>
									<div class="info" id="dateDetail">${versionProduct.yearValidUntil}</div>
								</div>
								<#if versionProduct.deductMoney??>
									<div class="detail-item">
										<div class="label">Deduction</div>
										<div class="info">-US$${versionProduct.deductMoney}</div>
									</div>
								</#if>
							</#if>
						</div>
						<div class="bottom">
							<div class="detail-item">
								<div class="label">Amount Due:</div>
								<#if curProduct == 5>
									<div class="info" id="amount">US$${reportProduct[0].price}</div>
								<#else>
									<div class="info" id="amount">US$${versionProduct.deductYearPrice}</div>
                                </#if>
							</div>
						</div>
					</div>
				</div>
				<div class="option-row">
					<div id="paypalBtn"></div>
					<button class="gd-btn btn-info" id="payBtn" style="display: none">Pay</button>
				</div>
			</div>
		</div>
	</section>
</main>
<#if isMobile == false>
    <#include "../../footer_new.ftl">
</#if>
<script src="https://www.paypal.com/sdk/js?client-id=AWLEIYlKUuvbmfBohXkOsJjFrDglUH8IpIVFy0X2Z2hvOb5FTce8oOijeRp0jFIcN7ihdKvB0yEKtbfP&locale=en_US"></script>
<script src="/static/plugins/qrcode.min.js"></script>
<script type="module">
	import { troggleActive } from '/static/js/common.js'
	const param = {
        productId: ${curProduct},
        payType: 0,
		<#if curProduct != 5>
        monthType: 3,
		</#if>
	}
    init()
    function init() {
        initPayPal()
	    initEvent()
    }
	function initEvent() {
        const unitList = document.querySelectorAll('#unitList .tab-item')
		unitList.forEach((item, i) => {
		    item.addEventListener('click', () => {
                troggleActive(item, () => {
                    const title = item.querySelector('.title_inner').innerText
                    document.getElementById('unitDetail').innerText = title
                    const amount = document.getElementById('amount')
                    <#if curProduct == 5>
                    switch (i) {
                        case 0:
                            param.productId = ${reportProduct[0].id}
                            amount.innerText = 'US$${reportProduct[0].price}'
                            break
                        case 1:
                            param.productId = ${reportProduct[1].id}
                            amount.innerText = 'US$${reportProduct[1].price * (1 - reportProduct[1].discount)}'
                            break
                        case 2:
                            param.productId = ${reportProduct[2].id}
                            amount.innerText = 'US$${reportProduct[2].price  * (1 - reportProduct[2].discount)}'
                            break
                    }
	                <#else>
                    const dateDetail = document.getElementById('dateDetail')
                    switch (i) {
                        case 0:
                            param.monthType = 3
                            dateDetail.innerText = '${versionProduct.yearValidUntil}'
                            amount.innerText = 'US$${versionProduct.deductYearPrice}'
                            break
                        case 1:
                            param.monthType = 2
                            dateDetail.innerText = '${versionProduct.halfYearValidUntil}'
                            amount.innerText = 'US$${versionProduct.deductHalfYearPrice}'
                            break
                        case 2:
                            param.monthType = 1
                            dateDetail.innerText = '${versionProduct.validUntil}'
                            amount.innerText = 'US$${versionProduct.deductPrice}'
                            break
                    }
                    </#if>
                })
		    })
		})

		const payList = document.querySelectorAll('.pay-tabs .tab-item')
        payList.forEach((item,i) => {
            item.addEventListener('click', () => {
				troggleActive(item, () => {
					const payDetail = document.getElementById('payDetail')
					const paypalBtn = document.getElementById('paypalBtn')
					const payBtn = document.getElementById('payBtn')
					switch (i) {
					    case 0:
					        param.payType = 0
                            payDetail.innerText = 'PayPal'
                            paypalBtn.show()
                            payBtn.hide()
							break
						case 1:
                            param.payType = 2
                            payDetail.innerText = 'WeChat Pay'
                            paypalBtn.hide()
                            payBtn.show()
							break
					}
				})
            })
        })

		document.getElementById('payBtn').addEventListener('click', e => {
		    showLoading()
			_axios.post('/v1/createOrder', param).then(res => {
                hideLoading()
			    if(res.Code === 200) {
			        let paypalNumber= res.Data.orderId
				    let weChatPayUrl= res.Data.weChatPayUrl

                    let str = '<p class="title">WeChat Pay</p>' +
                        '<div class="qrcode-wrap">' +
	                    '<div id="qrcode"></div>' +
	                    '</div>' +
                        '<div class="footer">Please use WeChat to scan the QR code to process the payment</div>'

                    let hasResult = false
				    showModal({
	                    <#if isMobile == false>
                        width: 680,
	                    <#else>
	                    position: {
	                        top: 100,
	                    },
	                    </#if>
                        class: 'pay-modal',
                        isShowCancelBtn: false,
                        isShowConfirmBtn: false,
                        content: str,
                        closeEvent: () => {
                            hasResult = true
                        }
                    })

				    const qrConfig = {
                        text: weChatPayUrl,
                        width: 216,
                        height: 216,
                        colorDark : '#000',
                        colorLight : '#FFF',
                        correctLevel : QRCode.CorrectLevel.H
                    }

				    if(gugeeGobal.isMobile) {
                        qrConfig.width = qrConfig.height = window.screen.width - 80 - 48
				    }

                    new QRCode(document.getElementById("qrcode"), qrConfig)
                    let timer = setInterval(() => {
						if(hasResult) {
							clearInterval(timer)
							return
						}
						const url = getEncodeUrl('/v1/order/status', {
                            paypalNumber: paypalNumber
						})
						_axios.get(url).then(res => {
							if(res.Code === 200 && !hasResult) {
								if(res.Data.status === '1') {
									hasResult = true
									closeModal()
									str = '<div class="icon-wrap"><i class="iconfont iconzhichi"></i></div>' +
										'<p>Payment Received</p>'
									showModal({
										<#if isMobile == false>
                                        width: 680,
										</#if>
										class: 'pay-result-modal',
										isShowCancelBtn: false,
										content: str
									})
								}
							}
						})
					}, 1500)
			    }
			})
           /* const {paypalNumber,weChatPayUrl} = (async () => {
                return await createProductOrder()
            })()*/
		})
	}

    function initPayPal() {
        paypal.Buttons({
            locale: 'en_US',
            // env: 'sandbox',
            fundingSource: paypal.FUNDING.PAYPAL,
            style: {
                label: 'paypal',
                shape: 'rect',
                color: 'blue',
                height: 36,
                tagline: false
            },
            createOrder: () => {
                // 创建订单
                return createProductOrder()
            },
            onError: err => {
                console.log('err: ', err)
            },
            onApprove: function (data, actions) {
                return actions.order.capture().then(function (details) {
                    // 支付成功
                    if (details.status === 'COMPLETED') {
                        // console.log('支付成功')
                        let config = {
                            showHeader: false,
                            class: 'modal',
                            content: 'pay success',
                            isShowConfirmBtn: false,
                            confirmBtnText: 'I know',
                            isShowCancelBtn: false
                        }
                        showModal(config)
                    }
                })
            }
        }).render('#paypalBtn')
    }

    const createProductOrder = async ()  => {
		visitRecord(7)
        let res = await _axios.post('/v1/createOrder', param)

	    if(param.payType === 0) {
            return res.Data.orderId
	    }
	    /*else {
            return {
                paypalNumber: res.Data.orderId,
                weChatPayUrl: res.Data.weChatPayUrl
            }
	    }*/
    }
</script>
</body>
</html>